<template>
  <el-container>
<!-- header -->
  <el-header id="head">

    <!-- 面包屑 -->
     <el-breadcrumb separator="/">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item :to="{ path: '/projects' }">项目</el-breadcrumb-item>
  <el-breadcrumb-item><a href="/projects">UML设计</a></el-breadcrumb-item>
  </el-breadcrumb>


<!--    &lt;!&ndash; 新建项目 &ndash;&gt;-->
<!--    <el-button type="primary" @click="jump">开始设计</el-button>-->

       <!--分栏展示按钮  -->
       <br>
        <el-row :gutter="0">


      <el-col :span="3"><div class="block1">
        <el-button type="primary" @click="openPage" >图形设计</el-button>
      </div></el-col>

      <el-col :span="3"><div class="block2">
        <el-button type="primary" @click="enterFile" >文档列表</el-button>
        </div></el-col>

      <el-col :span="3"><div class="block3">
        <el-button type="primary" @click="enterUML" disabled>UML设计</el-button>
        </div></el-col>

 
      </el-row>

  </el-header>
  <br> <br>

  <el-container>
    <!-- el-aside -->
   <el-aside width="50%" >
      <img src="~@/assets/pic3.jpg" alt="" id="pic3">
   </el-aside>

   <!-- el-main -->
  <el-main id="bg">
     
      <img src="~@/assets/pic4.png" alt="" id="pic4">

<el-row :gutter="4" id="row">
  <el-col :span="14"><div class="grid-content bg-purple">
    <h1 id="line1"><b>点击开始UML设计:</b></h1>
  </div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple">
    <el-button  @click="jump" id="line2" type="primary">点此跳转</el-button>
  </div></el-col>
 </el-row>
 
  </el-main>


  </el-container>


  


  


</el-container>

</template>


<script>
export default{
    methods:{
          openPage(){
      //跳转至原型设计页面
      setTimeout(() => {this.$router.push("/graphdesign")}, 10);
      // window.open('http://localhost:8080/graphdesign')

    },
    enterFile(){
      //跳转至文档页面
      setTimeout(() => {this.$router.push("/new")}, 10);
      // window.open('http://localhost:8080/new')
    },
     enterUML(){
      //跳转至uml设计页面
      setTimeout(() => {this.$router.push("/uml")}, 10);
      // window.open('http://localhost:8080/new')
    },
    jump(){
      window.open("http://39.105.133.20:8900/draw/")
    }
    }
}
</script>


<style scoped>
 

#pic3{

width:100%;		
height: 460px;
}

#pic4{
margin-top:0px;
padding-top: 0px;
width: 100%;
height: 310px;
}
#line1{
  margin-left: 30px;
  font-size: 30px;
  
}

#line2{

  margin-top: 45px;
  height: 70px;
  width: 160px;
  font-size: large;

}

#bg{
  background-color: antiquewhite;
}

#row{
  line-height: 40px;
}


</style>
